<template>
    <div class="mark">
        <div class="content">
            <p>请输入搜索内容！</p>
            <button
            @click="markClose"
            >好的</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "Mark",
    data(){
        return {
            flag: false,
        }
    },
    methods: {
        markClose(){
            this.$emit("markClose",this.flag)
        }
    }
}
</script>

<style lang="scss" scoped>
.mark{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    .content{
        width: 280px;
        height: 120px;
        background: #fffaf0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        p{
            font-size: 20px;
            font-weight: bold;
            color: #CC9999;
            text-align: center;
            margin-bottom: 20px;
        }
        button{
            padding: 10px 26px;
            border: none;
            background: #CC9999;
            color: #fffaf0;
            font-size: 16px;
            font-weight: bold;
            border-radius: 4px;
        }
    }
}
</style>